.modal-container {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	width: 100%;
	z-index: 10;
}

.modal-bg {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	background-color: var(--background-modifier-cover);
}

.modal {
	box-shadow: var(--shadow-l);
	background-color: var(--modal-background);
	border-radius: var(--modal-radius);
	border: var(--modal-border-width) solid var(--modal-border-color);
	padding: var(--modal-padding);
	position: relative;
	height: var(--dialog-height);
	min-height: 100px;
	width: var(--dialog-width);
	max-width: var(--dialog-max-width);
	max-height: var(--dialog-max-height);
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.modal-header {
	margin-bottom: 0.75rem;
}

.modal-title {
	font-size: var(--font-ui-large);
	margin-left: auto;
	margin-right: auto;
	font-weight: 600;
	text-align: start;
	line-height: var(--line-height-tight);

	&:empty {
		display: none;
	}
}

.modal-content {
	flex: 1 1 auto;
	font-size: var(--font-ui-small);
}

.modal-button-container {
	margin-top: 1rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: var(--font-ui-medium);
	button,
	.btn {
		width: auto;
	}
}

.import-options {
	.import-option {
		background-color: hsla(var(--color-accent-hsl), 0.075);
		border-radius: var(--radius-m);
		padding: 1rem;
		text-align: center;
		color: var(--text-accent);
		font-weight: 500;
		cursor: pointer;

		@media (hover: hover) {
			&:hover {
				background-color: hsla(var(--color-accent-hsl), 0.1);
			}
		}

		i {
			font-size: 2em;
			color: var(--text-muted);
		}
	}

	#import-json-textarea {
		width: 100%;
		height: 100px;
		resize: vertical;
	}
}

.tag {
	font-size: 0.8em;
	padding: 2px 6px;
	border-radius: 50px;
	background-color: hsla(var(--color-accent-hsl), 0.1);
	color: var(--text-accent);
}
